/* ---------------------封装获取节点函数--------------------- */
/**
 * @description 这是一个获取节点并返回节点的函数
 * @param {*} selector
 * @returns 节点
 */
function $(selector) {
	const result = document.querySelectorAll(selector);
	// 判断是否有这个节点,存在就不执行,不存在就提示错误
	if (!result || result.length === 0) {
		console.warn(`未获取到${selector}节点`);
		return;
	}
	// 判断选择器是否为多个
	if (result.length === 1) {
		return result[0]; // 只有一个节点时,输出伪元素的第一个节点
	} else {
		return result; // 不止一个节点时,输出全部
	}
}

/* ---------------------封装文档加载事件--------------------- */
/* 
	区别:
		load: 让所有资源加载完成后,才能执行js代码
		DOMContentLoaded: 只要DOM加载完成后,就可以执行js代码
*/
function ready(callback) {
	window.addEventListener("DOMContentLoaded", function () {
		//当前页面的具体功能
		callback(); //把使用时function中的功能全部执行到这个位置
	});
}

/* ---------------------封装点击跳转页面函数--------------------- */
/**
 * @name 点击跳转到指定页面
 * @param {string} selector
 * @param {string} target 跳转的页面
 */
function goTo(selector, target) {
	$(selector).addEventListener("click", function () {
		// console.log(1111);
		location.href = `${target}.html`;
	});
}

/* ---------------------渲染底部导航栏--------------------- */
/**
 * @name 渲染底部Tab栏
 * @description 传入默认当前页面的索引号
 * @param {Number}
 */
function render(index) {
	$("main").innerHTML += `
	<div id="tabBox"></div>
	<footer id="bottomTab">
		<ul class="df">
			<li><span class="iconfont icon-home"></span><span>首页</span></li>
			<li><span class="iconfont icon-heart-rate"></span><span>运动</span></li>
			<li><span class="iconfont icon-Vector"></span><span>圈子</span></li>
			<li><span class="iconfont icon-wode"></span><span>我的</span></li>
		</ul>
	</footer>`;
	tabChange(index);
}
/* ---------------------定义导航栏切换的函数--------------------- */
function tabChange(index) {
	let arr = ["home", "sports", "social", "user"];
	// 默认激活
	$("#bottomTab ul>li")[index].classList.add("activeTab");
	// 遍历添加属性, 绑定点击事件, 跳转对应页面
	$("#bottomTab ul>li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			v.classList.add("activeTab");
			location.href = `${arr[i]}.html`;
		});
	});
}

/* ---------------------封装一个是否登录过的函数--------------------- */
let local = require("./local.js");
const isToken = () => !local.get("t_k") && (location.href = "login.html");

/* ---------------------封装绑定事件的函数--------------------- */
function addEvent(dom, callback, event = "click") {
	// console.log(this);
	$(dom).addEventListener(event, callback);
}

let https = require("../utils/https.js");
/* ---------------------调接口获取用户信息--------------------- */
function getUserInfo() {
	https.get("/api/user/info", function (res) {
		// console.log(res);
		if (res.errno == 0) {
			// 对象解构
			let { badges, ranking } = res.data;
			// 渲染排名
			$("#rankTxt").textContent = ranking;
			// 渲染徽章个数
			$("#badgeTxt").textContent = badges;
		}
	});
}

/* ---------------------获取用户打卡信息,根据判断用户的打卡信息来渲染打卡提示文字,以及打卡天数--------------------- */
function isClockIn() {
	https.get("/api/user/clockInInfo", (res) => {
		if (res.errno == 0) {
			let { isClockIn, clockCount } = res.data;
			// 判断用户是否打卡,并渲染文字
			$("#punchBtn").textContent = isClockIn ? "已打卡" : "今日打卡";
			// 渲染打卡天数
			$("#punchTxt").textContent = clockCount;
		}
	});
}




//导出
module.exports = {
	$,
	ready,
	goTo,
	render,
	tabChange,
	isToken,
	addEvent,
	getUserInfo,
	isClockIn,
};
